<template>
  <div class="tool-detail" v-if="tool">
    <h2>{{ tool.name }}</h2>
    <div class="tool-icon large">{{ tool.icon }}</div>
    <p class="description">{{ tool.description }}</p>
    <div class="features">
      <h3>功能特点：</h3>
      <ul>
        <li v-for="(feature, index) in tool.features" :key="index">
          {{ feature }}
        </li>
      </ul>
    </div>
    <button class="primary-btn" @click="goToGenerate">开始使用</button>
  </div>
</template>

<script>
import { tools } from '@/data/tools'

export default {
  name: 'ToolDetail',
  data() {
    return {
      tool: null
    }
  },
  created() {
    const toolId = parseInt(this.$route.params.id)
    this.tool = tools.find(t => t.id === toolId)
  },
  methods: {
    goToGenerate() {
      this.$router.push(`/generate/${this.tool.id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.tool-detail {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  text-align: center;

  .tool-icon.large {
    font-size: 4rem;
    margin: 2rem 0;
  }

  .features {
    text-align: left;
    margin: 2rem 0;

    ul {
      list-style: none;
      margin-top: 1rem;

      li {
        padding: 0.5rem 0;
        padding-left: 1.5rem;
        position: relative;

        &:before {
          content: "✓";
          position: absolute;
          left: 0;
          color: #4CAF50;
        }
      }
    }
  }

  .primary-btn {
    padding: 1rem 3rem;
    font-size: 1.1rem;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      background-color: #45a049;
    }
  }
}
</style> 